<template>
  <div class="myDialog">
    <!-- 弹窗组件 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      width="450px"
    >
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :disabled="isDisabled"
        label-width="150px"

      >
        <el-form-item :label="$t('layoutName')" prop="layoutName">
          <el-input v-model="form.layoutName"/>
        </el-form-item>
        <el-form-item :label="$t('LayoutWidth')" prop="width">
          <el-input v-model="form.width"/>
        </el-form-item>
        <el-form-item :label="$t('LayoutHeight')" prop="height">
          <el-input v-model="form.height"/>
        </el-form-item>
        <el-form-item :label="$t('layoutType')" prop="type">
          <el-select v-model="form.type">
            <el-option
              v-for="item in layoutTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('BgPicture')">
          <el-upload
            :action="updateAvatarApi"
            :show-file-list="false"
            :on-success="handleChangeImg"
            :headers="headers"
            :file-list="fileList"
            accept=".PNG, .JPG, .GIF"
          >
            <img v-if="form.image||imageUrl" :src="imgUrlFormatter(form.image)||imageUrl">
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>
        </el-form-item>
        <el-form-item :label="$t('areaName')" prop="areaName">
          <el-select v-model="form.areaName" :placeholder="$t('selectArea')">
            <el-option
              v-for="item in layoutNameList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('description')" prop="description">
          <el-input :rows="2" v-model="form.description" type="textarea"/>
        </el-form-item>
      </el-form>
      <div v-if="!isDisabled" slot="footer" class="dialog-footer">
        <el-button type="primary" icon="el-icon-receiving" @click="doSave('ruleForm')">{{ $t('save') }}</el-button>
        <el-button icon="el-icon-delete" @click="resetForm('ruleForm')">{{ $t('reset') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import layoutApi from '@/api/production/layoutDesign'
import mySetting from '@/mixins/mySetting'
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
export default {
  name: 'MyDialog',
  mixins: [mySetting],
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      headers: {
        Token: getToken()
      },
      layoutNameList: [],
      layoutTypeList: [],
      dialogFormVisible: false,
      fileList: [],
      imageUrl: '',
      rules: {
        name: [
          { required: true, message: this.$t('layoutNameEmpty'), trigger: 'blur' }
        ],
        width: [
          { required: true, message: this.$t('layoutWidthEmpty'), trigger: 'blur' }
        ],
        height: [
          { required: true, message: this.$t('layoutHeightEmpty'), trigger: 'blur' }
        ],
        region: [
          { required: true, message: this.$t('selectActivityArea'), trigger: 'change' }
        ]
      } // 表单校验规则
    }
  },
  computed: {
    ...mapGetters(['updateAvatarApi', 'baseApi'])
  },
  created() {},
  methods: {
    // 获取区域名称列表
    getEqpAreasList() {
      layoutApi.getEqpAreasList().then(res => {
        this.layoutNameList = res.data
      })
    },
    // 获取布局类型列表
    getLayoutTypeList() {
      layoutApi.getLayoutTypeList().then(res => {
        this.layoutTypeList = res.data
      })
    },
    // 新增或者编辑数据
    addOrEdit() {
      if (this.form.id) {
        // 存在id则是更新
        layoutApi.updateList({ id: this.form.id, ...this.form }).then(res => {
          this.doMerge(res)
        })
      } else {
        // 不存在id则是新增
        layoutApi.addList(this.form).then(res => {
          this.doMerge(res)
        })
      }
    },
    // 确定提交数据
    doSave(val) {
      this.validationForm(val, this.addOrEdit)
    },
    // 重置dialog表单信息
    resetForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields()
      })
    },
    // 上传图片成功
    handleChangeImg(response) {
      this.form.image = response.data
      this.imageUrl = `${this.baseApi}/${response.data}`
    },
    imgUrlFormatter(url) {
      if (url === '' || url == null || url === undefined) return
      // 当图片路径相同时,即使源图片更改了,img内显示的也不会去刷新,需要在后面加radom或者当前时间去解决
      return this.baseApi + '/' + url + '?t=' + new Date()
    },
    // 打开弹窗
    openDialog(val) {
      this.getEqpAreasList()
      this.getLayoutTypeList()
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })
    },
    // 关闭弹窗
    closeDialog() {
      this.$emit('closeDialog')
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>
<style lang="scss" scoped>
.el-image {
  width: 150px;
  height: 150px;
}
.el-upload{
  img{
    width: 100px;
    height: 100px;
  }
}
</style>
